<template>
	 <el-row>
		 <el-upload class="avatar-uploader"
		 :action="dev+params.name" name="files"
		 :show-file-list="false"
		 :on-success="success"
		 :before-upload="beforeAvatarUpload"
		 :headers="token">
			<img v-if="imageUrl" :src="imgServerUrl+imageUrl" class="avatar" :style="'width:'+width+'px;height:'+height+'px;line-height:'+height+'px'">
			<i v-else class="el-icon-plus avatar-uploader-icon" :style="'width:'+width+'px;height:'+height+'px;line-height:'+height+'px'"></i>
			</el-upload>
		</el-row>
</template>
<script>
  import _ from 'lodash'
  import {IMGPATH,IMGSERVER} from '@/common/js/constant'
	export default{
		props:["params","uploadSuccess","pictureUrl","width","height"],
		name:'imgupload',
		data(){
			return {
	          imgServerUrl:IMGSERVER,
        		dev:IMGPATH,
        		files:[],
						imageUrl:'',
						token:{
							s_company_token:this.$store.getters.s_company_token
						}
			}
		},
		methods:{
			remove(file, fileList) {
		  },
		  preview(file) {
		  },
		  success(res, file){
			// this.imageUrl = URL.createObjectURL(file.raw);
			this.imageUrl = res.data;
			this.uploadSuccess(res.data);
		  },
			error(){
				alert("上传失败，感谢您的使用")
			},
			beforeAvatarUpload(file){
				 const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
				 const isLt2M = file.size / 1024 / 1024 < 2;
				 if (!isJPG) {
					 this.$message.error('上传头像图片只能是 JPG,png 格式!');
				 }
				 if (!isLt2M) {
					 this.$message.error('上传头像图片大小不能超过 2MB!');
				 }
				 return isJPG && isLt2M;
			}
		},
		mounted(){
			 this.imageUrl = this.pictureUrl;
		}
	}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	text-align: center;
	border: 1px dashed #c0ccda;
	border-radius: 3px;
}
.avatar {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 3px;
}
</style>
